“Visual Composer - Woocommerce Grid Layout with Carousel” Documentation by “Hitesh Khunt” v1.1

---

“Visual Composer - Woocommerce Grid Layout with Carousel”

---

Table of Contents

1. Introduction
2. Main Features
3. Installation guide
4. Getting started
5. Sources and Credits

---

A) Introduction - top

Post Layout give you an incredible flexibility to insert whatever you want in posts and pages body

Everyone can use , because it’s fully automatic, and it’s compatible with all recent versions of wordpress!

---

B) Main Features - top

• Responsive Design Layouts.
• 7 Style Available( Grid / List)
• Inline Post read popup
• Inline popup 9 effect
• post / category / portfolio carousel
• Custom Columns Layout
• Custom backgrond Color and hover background color
• Fitrow and Masonry Grid Layout
• Show more and Infinite Scroll and Number Pagination
• Multi Filtering with sorting
• Social Share icon for each post
• Custom posttype Support
• 60+ animation effects

---

C) Installation guide - top

This part of the documentation is going to cover, in a step by step instruction the installation of WP Plugins on your WordPress blog in general.

Step 1. The most important task is to make certain you have an upto date backup of your blog! This is always a good thing, not necessarily so important for our plugin but in general. Step 2. Log into your WordPress Admin area. Step 3. Look down the left hand column for "Plugins" and then click on the word "Plugins". Step 4. Just to the right of the title “(Manage) Plugins” in the image above, you can see a button marked "Add New", click this button.

Plugin Upload

Step 5. The image above shows the option to upload the plugin from your own PC, this is the svc-woo-grid-addon.zip inside the zip you had previously downloaded from CodeCanyon. Install the zip and click on "Activate Plugin".

Plugin activation

Installibg by FTP

First, you need a tool for uploading plugin files to your site, you can use filemanager from cPanel or any FTP clients. Some good FTP clients :

• Download svc-woo-grid-addon.zip from CodeCanyon
• Extract the svc-woo-grid-addon directory to your computer
• Upload the svc-woo-grid-addon directory to the /wp-content/plugins/ directory
• Activate the plugin in the Plugin dashboard

Also WordPress codex contains instructions on how to do this here.

---

D) Getting started - top

The simple activation of the plugin is enough to have the desired behavior for all pages.

Animated Text Visual Composer Setting

General Settings Setting Title Description Default Possible Values Title Enter Post grid title. Skin type Choose svc type. Grid Layout Grid LayoutCarousel Build Post Query Create WordPress loop, to populate content from your site. Skin type Choose skin type for grid layout. Style1Style2Style3Style4Style5Style6 for List View Items Display This variable allows you to set the maximum amount of items displayed at a time with the widest browser width.(Only for svc type = carousel) 4 Show pagination Show pagination(Only for svc type = carousel) unchecked Yes(checked) Show pagination Numbers Show numbers inside pagination buttons.(Only for svc type = carousel) unchecked Yes(checked) Hide navigation Display "next" and "prev" buttons.(Only for svc type = carousel) unchecked Yes(checked) AutoPlay Set Slider Autoplay.(Only for svc type = carousel) unchecked Yes(checked) AutoPlay Time(Visible only autoplay "yes") Set Autoplay slider speed.(Only for svc type = carousel) 5 Show more add Show more Post last element of Carousel.(Only for svc type = carousel) unchecked Yes(checked) Synced Slider(Only for svc type = carousel and Items Display = 1) Set Synced Slider.see Example here unchecked Yes(checked) Synced Display(Synced Slider "yes") Set Synces Slider Display elements.(Only for svc type = carousel) 10 Desktop Columns Count Choose Desktop(PC Mode) Columns Count.(not allow for style6) 3 Columns 1 Column2 Columns3 Columns4 Columns Tablet Columns Count Choose Tablet Columns Count.(not allow for style6) 2 Columns 1 Column2 Columns3 Columns4 Columns Mobile Columns Count Choose Mobile Columns Count.(not allow for style6) 1 Columns 1 Column2 Columns3 Columns4 Columns Show filter Select to add animated category filter to your posts grid. unchecked Yes(checked) Show Sorting Filter Display Sorting Filter. unchecked Yes(checked) Show Grid/List View Type Filter Display Grid/List View Filter. unchecked Yes(checked) Filter mode if select Show filter : yes then display this section,Filter Layout Option. Dropdown DropdownLiner List Show Filter value counter if select Show filter : yes then display this section,Filter category Count display. Yes(checked) Layout mode Select layout template. Fit Row Fit RowMasonry Thumbnail size Enter thumbnail size. Example: thumbnail, medium, large, full or other sizes defined by current theme. Alternatively enter image size in pixels: 200x100 (Width x Height). thumbnail, medium, large, full, other sizes defined by current theme : 200x100 Excerpt Length set excerpt length.default:20 20 Pagination Style Select Pagination Style Show more Show moreInfinite ScrollNumber Pagination Show Product Listing Carousel Show Product Listing Carousel. unchecked Yes(checked) Hide Show more Button hide Show more button.this option only for Show more pagination. unchecked Yes(checked) Post load Effect Select post load effect. None NonebounceflashpulserubberBandshakeswingtadawobblebounceInbounceInDownbounceInLeftbounceInRightbounceInUpfadeInfadeInDownfadeInDownBigfadeInLeftfadeInLeftBigfadeInRightfadeInRightBigfadeInUpfadeInUpBigflipflipInXflipInYlightSpeedInrotateInrotateInDownLeftrotateInDownRightrotateInUpLeftrotateInUpRightslideInUpslideInDownslideInLeftslideInRightzoomInzoomInDownzoomInLeftzoomInRightzoomInUprollIntwisterInDowntwisterInUpswappuffInvanishInopenDownLeftRetournopenDownRightRetournopenUpLeftRetournopenUpRightRetournperspectiveDownRetournperspectiveUpRetournperspectiveLeftRetournperspectiveRightRetournslideDownRetournslideUpRetournslideLeftRetournslideRightRetournswashInfoolishIntinRightIntinLeftIntinUpIntinDownInboingInUpspaceInUpspaceInRightspaceInDownspaceInLeft Show more text add Show more button text.Default:Show More Enter any text Quick View text add Quick View button text.Default:Quick View Enter any text Extra class name If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file. Add any class name for custom css

Display Settings Setting Title Description Default Possible Values Hide Excerpt hide Excerpt content. unchecked Yes(checked) Hide Category hide category Section. unchecked Yes(checked) Hide Rating Hide Rating unchecked Yes(checked) Hide Quick View Hide Quick View. unchecked Yes(checked)

Color Settings Setting Title Description Default Possible Values Post Background Color set each post background color. any color select on color picker Post hover Background Color set each post hover background color. any color select on color picker Image below / top line color set Image below / top color.(This option only for style1,style2 and style4) any color select on color picker Title Color Set Title Color any color select on color picker Title Hover Color Set Title Hover Color any color select on color picker Show More Color Set Show More Color any color select on color picker Filter text and border color Set Filter text and border color any color select on color picker Active Filter text color Set Active Filter text color any color select on color picker Active Filter text background color Set Active Filter text background color any color select on color picker Rating Color Set Rating color any color select on color picker Pagination background color set Pagination background color. any color select on color picker Pagination active background color set Pagination active background color. any color select on color picker Pagination Number color set Pagination Number color. any color select on color picker Navigation and Pagination color Set Navigation and pagination color.(Only for svc type = carousel) any color select on color picker

General Option Settings Setting Title Description Default Possible Values Hide featured Image in popup hide featured Image inline popup. unchecked Yes(checked) Popup Effect set Inline Post Popup effect. Noneflip-h-3drotate-carouse-leftslide-in-topfade-in-scalemfp-newspapermfp-zoom-inmfp-move-horizontalmfp-3d-unfoldmfp-zoom-out Popup background color Set Popup background color any color select on color picker Popup bottom line color Set Popup bottom line color any color select on color picker Max Width For popup set popup max width.default:600px 600px

---

E) Sources and Credits - top

I've used the following css files as listed.

• Bootstrap.css
• Megnific Popup
• Owl Carousel

---

Once again, thank you so much for purchasing this wordpress plugin. As I said at the beginning, I'd be glad to help you if you have any questions relating to this plugin. No guarantees, but I'll do my best to assist. If you have a more general question relating to the plugin on codecanyon, you might consider visiting the forums and asking your question in the "support" section.

Hitesh Khunt

Go To Table of Contents

---